<template>
  <div class="page">
    <div class="shopInfo" v-for="(item, itemindex) in shop" :key="itemindex">
      <div class="shopImg">
        <img :src="item.img" @click="shopInfo(item.id)" />
      </div>
      <div class="shopDesc">
        <div class="shopTitle" @click="shopInfo(item.id)">{{ item.title }}</div>
        <div class="priceinfo">
          <div class="shopPrice">￥:{{ item.price }}</div>
          <div class="buynum">90人付款</div>
        </div>

        <el-button
          style="width:75%"
          type="primary"
          class="el-icon-goods"
          @click="shopInfo(item.id)"
          >购买</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shop: ""
    };
  },
  //预加载事件
  created() {
    this.getData();
  },
  methods: {
    //获取商品列表
    getData() {
      let that = this;
      this.$axios
        .get("/getData")
        .then(response => {
          //把返回的数据存进定义的shop里
          that.shop = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    //跳转商品详情
    shopInfo(id) {
      this.$router.push({
        path: "/shopInfo",
        //id是商品的id
        query: {
          id: id
        }
      });
    }
  }
};
</script>
<style>
.shopInfo {
  width: 47%;
  margin: 20px 0;
  border: 1px solid #eee;
  display: inline-block;
}
.shopImg img {
  width: 100%;
  height: 50%;
  cursor: pointer;
}
.shopTitle {
  font-size: 16px;
  width: 100%;
  line-height: 20px;
  cursor: pointer;
  text-align: left;
  margin: 3px;
  height: 40px;

  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}
.priceinfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
}
.shopPrice {
  color: red;
  margin-left: 4px;
}
.buynum {
  color: #aaa;
  margin-right: 4px;
  font-size: 12px;
}
</style>
